<template>
  <div>
    <leftRightSplit>
      <template #left>
        <ContentWrap title="流程应用分类">
          <treeDic
            v-model="queryParam.AppClassify"
            :dic-id="DictItemDic.flowType"
            @change="loadClassify"
            @load="loadDic"
          />
        </ContentWrap>
      </template>
      <template #right>
        <ContentWrap :title="title">
          <div class="app-container">
            <Search
              ref="search"
              :schema="schema"
              :model="queryParam"
              :is-col="false"
              layout="inline"
              :showSearch="true"
              button-position="left"
              :search-loading="loading"
              :reset-loading="loading"
              @search="search"
              @reset="search"
            >
              <template #opts>
                <BaseButton v-hasPermi="'add'" type="success" @click="addApp()"
                  >添加应用</BaseButton
                >
              </template>
            </Search>
          </div>
          <Table
            :data="appList"
            :columns="columns"
            row-key="Id"
            :pagination="paging"
            @change="load"
          >
            <template #appClassify="e">
              <span v-if="classify[e.row.AppClassify]">
                {{ classify[e.row.AppClassify].text }}</span
              >
            </template>
            <template #appType="e">
              <span v-if="FlowAppType[e.row.AppType]"> {{ FlowAppType[e.row.AppType].text }}</span>
            </template>
            <template #flow="e">
              <span v-if="e.row.FlowId"> {{ e.row.FlowName + '(' + e.row.FlowVer + ')' }}</span>
            </template>
            <template #status="e">
              <el-switch
                :disabled="$hasPermi('set') == false"
                v-model="e.row.Status"
                :inactive-text="e.row.Status == 0 ? FlowAppStatus[0].text : FlowAppStatus[2].text"
                :inactive-value="2"
                active-text="启用"
                :active-value="1"
                @change="(val) => setStatus(e.row, val)"
              />
            </template>
            <template #appTime="e">
              <span v-if="e.row.AppTime">
                {{ $formatTime(e.row.AppTime, 'yyyy-MM-dd HH:mm') }}</span
              >
            </template>
            <template #action="e">
              <BaseButton
                v-hasPermi="'set'"
                :icon="msgIcon"
                size="small"
                title="编辑消息模版"
                type="info"
                circle
                @click="eidtAppMsg(e.row)"
              />
              <BaseButton
                v-hasPermi="'set'"
                v-if="e.row.AppType === 0 && e.row.Status !== 1"
                title="设置应用菜单"
                :icon="filesIcon"
                size="small"
                type="primary"
                circle
                @click="editPower(e.row)"
              />
              <BaseButton
                v-hasPermi="'set'"
                v-if="e.row.AppType === 0 && e.row.FlowId != null"
                title="应用归档表单配置"
                :icon="settingIcon"
                size="small"
                type="warning"
                circle
                @click="eidtForm(e.row)"
              />
              <BaseButton
                v-hasPermi="'set'"
                v-if="e.row.Status !== 1"
                title="编辑流程应用信息"
                :icon="editIcon"
                size="small"
                type="primary"
                circle
                @click="edit(e.row)"
              />
              <BaseButton
                v-hasPermi="'delete'"
                v-if="e.row.Status == 0"
                size="small"
                title="删除流程应用"
                :icon="dropIcon"
                type="danger"
                circle
                @click="deleteFlow(e.row)"
              />
            </template>
          </Table>
        </ContentWrap>
      </template>
    </leftRightSplit>
    <flowAppEdit
      :id="id"
      :app-classify="queryParam.FlowType"
      :visible="infoVisible"
      @close="closeEdit"
    />
    <flowAppMsg :id="id" :flow-id="flowId" v-model:visible="msgVisible" :app-name="appName" />
    <editAppPower :app-id="id" :app-name="appName" v-model:visible="powerVisible" />
    <flowAppFormEdit :app-id="id" v-model:visible="formVisible" />
  </div>
</template>

<script>
import { treeDic } from '@/components/base/'
import { DictItemDic, EnumDic, FlowAppType, FlowAppStatus } from '../../config/flowConfig'
import * as flowAppApi from '../../api/flowApp'
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
import { useIcon } from '@/hooks/web/useIcon'
import flowAppEdit from './components/flowAppEdit.vue'
import editAppPower from './components/editAppPower.vue'
import flowAppMsg from './components/flowAppMsg.vue'
import flowAppFormEdit from './components/flowAppFormEdit.vue'
export default {
  components: {
    treeDic,
    Search,
    Table,
    flowAppEdit,
    editAppPower,
    flowAppMsg,
    flowAppFormEdit
  },
  data() {
    return {
      EnumDic,
      DictItemDic,
      FlowAppStatus,
      loading: false,
      FlowAppType,
      appList: [],
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      filesIcon: useIcon({ icon: 'ep:files' }),
      viewIcon: useIcon({ icon: 'ep:view' }),
      settingIcon: useIcon({ icon: 'ep:setting' }),
      msgIcon: useIcon({ icon: 'ep:message' }),
      powerVisible: false,
      title: '全部应用',
      id: null,
      appName: null,
      flowId: null,
      infoVisible: false,
      msgVisible: false,
      formVisible: false,
      classify: {},
      queryParam: {
        Status: [],
        QueryKey: null,
        FlowType: null
      },
      schema: [
        {
          field: 'QueryKey',
          label: '应用名称',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '应用名称'
          }
        },
        {
          field: 'AppType',
          label: '流程状态',
          component: 'EnumItem',
          componentProps: {
            dicKey: EnumDic.FlowAppType,
            sysHead: 'flow',
            placeholder: '应用类型'
          }
        },
        {
          field: 'Status',
          label: '状态',
          component: 'EnumItem',
          componentProps: {
            dicKey: EnumDic.FlowAppStatus,
            multiple: true,
            sysHead: 'flow',
            placeholder: '应用状态'
          }
        }
      ],
      columns: [
        {
          field: 'Id',
          label: '应用No',
          align: 'center',
          minWidth: 120
        },
        {
          field: 'AppName',
          label: '应用名称',
          align: 'left',
          minWidth: 250
        },
        {
          sortby: 'AppClassify',
          field: 'AppClassify',
          label: '应用分类',
          align: 'center',
          width: 120,
          slotName: 'appClassify',
          sortable: 'custom'
        },
        {
          sortby: 'AppType',
          field: 'AppType',
          label: '应用类型',
          align: 'center',
          width: 120,
          slotName: 'appType',
          sortable: 'custom'
        },
        {
          field: 'flow',
          label: '应用流程',
          align: 'center',
          slotName: 'flow',
          minWidth: 150
        },
        {
          field: 'Status',
          label: '应用状态',
          align: 'center',
          slotName: 'status',
          width: 150,
          sortable: 'custom'
        },
        {
          field: 'AppShow',
          label: '说明',
          align: 'left',
          minWidth: 150
        },
        {
          field: 'AppTime',
          label: '启用时间',
          align: 'center',
          slotName: 'appTime',
          sortable: 'custom',
          width: 150
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          width: 200,
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    closeEdit(isRefresh) {
      this.infoVisible = false
      if (isRefresh) {
        this.reset()
      }
    },
    editPower(row) {
      this.id = row.Id
      this.appName = row.AppName
      this.powerVisible = true
    },
    eidtForm(row) {
      this.id = row.Id
      this.formVisible = true
    },
    eidtAppMsg(row) {
      this.id = row.Id
      this.flowId = row.FlowId
      this.appName = row.AppName
      this.msgVisible = true
    },
    addApp() {
      this.id = null
      this.infoVisible = true
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.Status = null
      this.load()
    },
    loadDic(e) {
      this.classify = e.cache
      this.reset()
    },
    loadClassify(e) {
      if (this.queryParam.AppClassify == null) {
        this.title = '全部应用'
      } else {
        this.title = e.cache[this.queryParam.AppClassify].text + '类应用列表'
      }
      this.load()
    },
    search(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.AppType = data.AppType
      this.queryParam.Status = data.Status
      this.load()
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await flowAppApi.Query(this.queryParam, curPaging)
      if (res.List) {
        this.appList = res.List
      } else {
        this.appList = []
      }
      this.paging.total = res.Count
    },
    async setStatus(row, value) {
      if (value === 1) {
        await flowAppApi.Enable(row.Id)
      } else {
        await flowAppApi.Stop(row.Id)
      }
      row.Status = value
    },
    edit(row) {
      this.id = row.Id
      this.infoVisible = true
    },
    deleteFlow(row) {
      const title = '确认删除应用:' + row.AppName + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await flowAppApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.reset()
    }
  }
}
</script>
